<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>添加房源</title>
    <link rel="stylesheet" href="/static/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/common/css/uploadpic.css">
    <link rel="stylesheet" href="/static/common/css/style.css">
    <link rel="stylesheet" href="/static/common/css/webuploader.css">
    <script type="text/javascript" src="/static/common/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/common/layui/layui.js"></script>
    <script type="text/javascript" src="/static/common/js/webuploader.min.js"></script>

    <style type="text/css">
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }

        .site-block {
            width: 95%;
            padding: 20px;
            height: 470px;
            border: 2px solid #eee;
        }

        .site-text {
            position: relative;
        }

        .layui-form-item {
            width: 100%;
        }

        .layui-inline {
            display: inline-block;
            width: 49% !important;
        }

        .layui-input:focus, .layui-textarea:focus {
            border-color: red !important;
        }

        .class-label {
            overflow: inherit !important;
            width: 655px !important;
            text-align: left !important;
        }

        .layui-inline {
            width: auto !important;
        }

        #demoText {
            width: 100px;
        }

        .layui-form-item {
            margin-bottom: 0px !important;
        }
    </style>
</head>
<body style="margin: 20px 20px ">
<div class="site-text site-block ">
    <div class="layui-form-item">
        <label class="layui-form-label class-label" style="font-size: 18px;font-weight: 600">${data.nickname}-房源列表</label>
        <button class="layui-btn" style="width: 150px;" onclick="add()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="120">
            <col width="120">
            <col width="120">
            <col width="120">
            <col width="120">
            <col width="120">
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>封面图</th>
            <th>类型</th>
            <th>面积</th>
            <th>单价</th>
            <th>容纳人数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list stationHouse as sh>
        <tr>
            <td>${sh_index+1}</td>
            <#assign text=sh.cover_img_path />
            <#assign path=text?eval />
            <td onclick="seeImg('${path.minPath}')"><img src="${path.minPath}" width="40px" height="20px"></td>
            <td>${sh.type}</td>
            <td style="text-align: right">${sh.area} &nbsp;㎡</td>
            <td style="text-align: right">${sh.price} &nbsp;元/月</td>
            <td>${sh.capacity}</td>
            <td>
                <div class="layui-btn-group">
                    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="deleteData(this,${sh.id})">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>
            </td>
        </tr>
        </#list>
        </tbody>
    </table>
</div>
<div style="display: none" id="module" lay-filter="module-">
    <form class="layui-form layui-form-pane" style="margin: 10px 10px">
        <div class="layui-form-item" style="">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-verify="required">
                        <option value="工位">工位</option>
                        <option value="独立办公室">独立办公室</option>
                    </select>
                </div>
            </div>
            <input type="hidden" name="station_id" value="${data.station_id}">
            <div class="layui-inline" style="float: right">
                <label class="layui-form-label">面积</label>
                <div class="layui-input-inline" style="width: 175px">
                    <input type="text" name="area" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
                <div class="layui-form-mid layui-word-aux" style="font-size: 18px;width: 5px">㎡</div>
            </div>
        </div>
        <div class="layui-form-item" style="">
            <div class="layui-inline">
                <label class="layui-form-label">单价</label>
                <div class="layui-input-inline" style="width: 140px">
                    <input type="text" name="price" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
                <div class="layui-form-mid layui-word-aux" style="width: 40px">元/月</div>
            </div>
            <div class="layui-inline" style="float: right">
                <label class="layui-form-label">容纳人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="capacity" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item " pane>
            <label class="layui-form-label" style="height: 180px!important;">楼盘封面图</label>
            <div class="layui-input-block" style="padding:  2px 2px 2px 15px;height: 180px!important;">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-input-block">
                    <img class="layui-upload-img" id="demo1" style="margin: 4px -108px;">
                    <p id="demoText" style="margin: 4px -108px;"></p>
                </div>
                <input type="hidden" name="cover_img_path" value="" id="cover_img_path" lay-verify="cover_img_path">
            </div>
        </div>
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="module">立即提交</button>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        layui.use('form', function () {
            var form = layui.form;
            form.render('select');
            /***********************提交**************************************/
            form.on('submit(module)', function (data) {
                $.post('/officeBuilding/stationBranch/attribute-insert.do', data.field, function (res) {
                    if (res.data == 'SUCCESS') {
                        layer.msg('添加成功!', {icon: 1});
                        setTimeout("location.reload()", 1000)
                    } else {
                        layer.msg('添加失败!', {icon: 2});
                    }
                })

                return false;
            });
            /***********************验证是否上传图片**************************************/
            form.verify({
                cover_img_path: function (value) {
                    if (value == '') {
                        return '请上传封面图';
                    }
                }
            })

        })
        layui.use('upload', function () {
            var $ = layui.jquery
                    , upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/officeBuilding/building/upload.do'
                , before: function (obj) {
                    layer.msg('上传中...', {icon: 16, shade: 0.01});
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.success == false) {
                        layer.closeAll('loading');
                        return layer.alert('上传失败');
                    } else { //上传成功
                        var demoText = $('#demoText');
                        demoText.html('<span class="calss-spanc" style="color: #01b84e;">上传成功</span>');
                        $("#cover_img_path").val(JSON.stringify(res.data));
                        layer.closeAll('loading');
                        return layer.alert('上传成功');
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        })
    </script>
</div>
</body>
<script type="text/javascript">
    var module = $('#module').html();
    $('#module').html('');

    function add() {
        layer.open({
            type: 1,
            title: '${data.nickname}-添加房源',
            area: ['680px', '400px'], //宽高
            content: module
        });
    }

    function seeImg(path) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img src="' + path + '">'
        });
    }

    function deleteData(obj, id) {
        layer.confirm('确定要删除吗?', function () {
            $.post('/officeBuilding/stationBranch/attribute-delete.do', {id: id}, function (res) {
                if (res.data == true) {
                    layer.msg('删除成功!', {icon: 1});
                    $(obj).parent().parent().parent().remove();
                } else {
                    layer.msg('删除失败!', {icon: 1});
                }
            }, 'json')
        })
    }
</script>

</html>